<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- <link rel="shortcut icon" href="img/favicon.ico"/> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
    *{
    	margin:5px;
    }
	.container{
		width: 960px;
		margin:0 auto;
	}
	.date input[type="text"]{
		width:30px;
		margin-left: 2px;
	}
</style>
<script src="vue.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script>	
//https://cdn.bootcss.com/vue/2.4.2/vue.js
//https://cdn.bootcss.com/axios/0.16.2/axios.min.js
//https://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css
	window.onload = function(){			
		var t1,t2,t3,	 //设置定时器
		    now = new Date(); //获取本地时间
    	new Vue({
      	    el:'.container',
            data:{
          	  hide:false,
              time:500,
              api:null,
              reapi:null,
              url:null,
              count:null,
              iframearr:[],
              date:{    //本地时间
              	year:now.getFullYear(),
              	mouth:now.getMonth()+1,
              	day:now.getDate(),
              	hour:null,
              	minutes:null,
              	second:null
              },
              nowDate:{   //定时时间
                year:null,
                mouth:null,
                day:null,
                hour:00,
                minutes:00,
                second:00           
              }              
        },
        methods:{
        	getnowDate(){  //获取本地时间
        		var nowTime = new Date();
        		this.nowDate={
		          	year:nowTime.getFullYear(),
		          	mouth:nowTime.getMonth()+1,
		          	day:nowTime.getDate(),   
		          	hour:nowTime.getHours(),
		          	minutes:nowTime.getMinutes(),
		          	second:nowTime.getSeconds()		          	   			
        		}         		
        	},
        	draw(){
			        this.hide=true; 
              this.iframearr.length=this.count;
			        (this.api==null)?this.url=this.reapi:this.url=this.api;
			        var _this = this;
              _this.loadInfo();
            
        	},
			    loadInfo(){
      				var _this = this;
      				t1=setInterval(function() {
                          if(_this.reapi==null){
      						_this.reapi=_this.api;
      						_this.api=null      	
                          }else{
                          	_this.api=_this.reapi
      						_this.reapi=null;  
                          }        		
      				},_this.time);
			 },
      		stop(){
      			this.hide=false
      			window.clearInterval(t1);
      			window.clearInterval(t2);
      			window.clearInterval(t3);
      			(this.api==null)?this.url=this.reapi:this.url=this.api;
      			this.api=this.url;
      			}
          },
          mounted(){
          //挂载完成就刷新当前时间
             setInterval(this.getnowDate,250);
          }	    
    	})		
	} 
</script>
</head>
<body>
<div class="container row">
    <div class="time">
    	<span>当前时间：</span><span>{{nowDate.year}}年</span><span>{{nowDate.mouth}}月</span><span>{{nowDate.day}}日</span><span>{{nowDate.hour}}时</span><span>{{nowDate.minutes}}分</span><span>{{nowDate.second}}秒</span>
        <div>//读取的是本地设备时间，请自行校对时间&nbsp;&nbsp;&nbsp; <a href="index.html" target="_self">首页</a>&nbsp;&nbsp;<a href="draw_timer.html" target="_self">定时提交（PC本地时间）</a>&nbsp;&nbsp;<a href="draw_bjtime.html" target="_self">定时提交（北京时间）</a></div>  
    </div>
<!--     <div class="date">
        <label>定时时间：</label>
        <input type="text" v-model="date.year" :disabled="hide"/>年
		<input type="text" v-model="date.mouth" :disabled="hide"/>月
		<input type="text" v-model="date.day" :disabled="hide"/>日
		<input type="text" v-model="date.hour" :disabled="hide"/>时
		<input type="text" v-model="date.minutes" :disabled="hide"/>分
		<input type="text" v-model="date.second" :disabled="hide"/>秒
		//时间格式：2017-01-07 00-00-00
    </div> -->
	<div>
		<label for="time">刷新间隔：</label>
		<input type="text" id="time" v-model="time" :disabled="hide">//单位：毫秒
	</div>
	<div>
		<label for="api">提交地址：</label>
		<input type="text" id="api" v-model="api"  v-show="!hide" :disabled="hide">
		<input type="text" v-model="url" v-show="hide" disabled>
	</div>
	<div>
		<label for="iframe">窗口数目：</label>
		<input type="text" id="iframe" v-model="count" :disabled="hide">
	</div>
	<div>
	<input type="button" class="btn btn-primary" value="开始提交" v-show="!hide" @click="draw">
	<input type="button" class="btn btn-primary" value="停止提交" v-show="hide" @click="stop">
	</div>
	<hr>
	<p v-show="hide">请根据该窗口返回的显示内容判断链接是否正确</p>
	<div v-show="hide">
    	<h4>正在抽奖中</h4>
    </div>
	<iframe :src="api" v-show="api" frameborder="1" v-for="item in iframearr"></iframe>
</div>
</body>
</html>